<template>
  <div class="catemanager">
    <itHeader>
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
      <span slot="center">栏目管理</span>
      <span slot="right" class="right" @click="save">保存</span>
    </itHeader>

    <!-- 现有的 -->
    <div class="mychannel">
      <h3>点击删除频道</h3>
      <div class="list">
        <span
          :key="index"
          v-for="(item, index) in categoryList"
          @click="remove(index)"
          >{{ item.name }}</span
        >
      </div>
    </div>

    <!-- 可添加的 -->
    <div class="youchannel">
      <h3>点击添加频道</h3>
      <div class="list">
        <span
          :key="index"
          v-for="(item, index) in del_categoryList"
          @click="add(index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>


<script>
import itHeader from "@/components/itHead.vue";
//    get_category(获取栏目分类);
import { get_category } from "@/apis/post.js";

export default {
  // 注册组件：
  components: {
    itHeader,
  },
  // 数据：
  data() {
    return {
      categoryList: [],
      del_categoryList: [],
      notEdit: [],
    };
  },
  // 方法：
  methods: {
    remove(index) {
      console.log(index);
      // 给为添加的列表中加上要移除的栏目
      this.del_categoryList.push(this.categoryList[index]);
      // 将已有栏目中要删除的栏目删除
      this.categoryList.splice(index, 1);
    },
    add(index) {
      this.categoryList.push(this.del_categoryList[index]);
      // 将已有栏目中要删除的栏目删除
      this.del_categoryList.splice(index, 1);
    },
    // 保存按钮
    save() {
      // 保存本地：自己栏目
      localStorage.setItem("categoryList", JSON.stringify(this.categoryList));
      // 保存本地：未有栏目
      localStorage.setItem(
        "del_categoryList",
        JSON.stringify(this.del_categoryList)
      );
      // 轻提示
      this.$toast.success("保存成功");
    },
  },
  // 钩子：
  async mounted() {
    // 判断本地中能不能取到已有栏目：
    if (localStorage.getItem("categoryList")) {
      this.categoryList = JSON.parse(localStorage.getItem("categoryList"));
    } else {
      let res = await get_category();
      console.log(res);
      this.categoryList = res.data.data;
    }

    // 判断本地中能不能取到未有栏目：
    if (localStorage.getItem("del_categoryList")) {
      this.del_categoryList = JSON.parse(
        localStorage.getItem("del_categoryList")
      );
    }

    /*
    // 删除栏目列表中的关注和头条
    this.categoryList.forEach((v, index) => {
      // console.log(v);
      if (v.name == "关注" || v.name == "头条") {
        //
        console.log(v.name + "是：" + index);
        //
        // if (v.name == "关注") {
        //   this.categoryList.splice(index, 1);
        // }
        // this.categoryList.splice(index, 1);
      }
    });
    */

    // for (let i = 0; i <= this.categoryList.length; i++) {
    //   if (
    //     this.categoryList[i].name == "关注" ||
    //     this.categoryList[i].name == "头条"
    //   ) {
    //     this.categoryList.splice(i, 1);
    //   }
    // }

    // 删除栏目列表中的关注和头条
    this.categoryList.forEach((v, index) => {
      if (v.name == "关注") {
        this.notEdit.push(v);
        localStorage.setItem("notEdit", JSON.stringify(this.notEdit));
        // 删除此数据
        this.categoryList.splice(index, 1);
      }
    });

    this.categoryList.forEach((v, index) => {
      if (v.name == "头条") {
        this.notEdit.push(v);
        localStorage.setItem("notEdit", JSON.stringify(this.notEdit));
        // 删除此数据
        this.categoryList.splice(index, 1);
      }
    });

    console.log(this.categoryList);
  },
};
</script>


<style lang="less" scoped>
.mychannel {
  margin-bottom: 30px;
}
.mychannel,
.youchannel {
  padding: 10px;
  h3 {
    line-height: 30px;
    font-weight: bold;
    color: #555;
    font-size: 14px;
  }
  .list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    > span {
      width: 20%;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 40px;
    }
  }
}
/deep/.right {
  font-size: 16px !important;
}
</style>